<template>
	<view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" style="background-color: #f2f5fc;"  class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		               @scroll="scroll">
		<view class="container">
			<view v-for="(item,index) in urllist" class="item">
				<image class="item" @click="prview(index)" :src="getImageurl(item.imageurl,index)"  mode="widthFix"></image>
			</view>
			
			<view class="item">
			
			</view>
		</view>
		</scroll-view>
	</view>
</template>

<script>
		import http from '../../utils/http.js';
		export default {
			data() {
				return {
					urllist:[],
					imageurlList:[]
				}
			},
			onPullDownRefresh() {
			        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			        console.log('refresh');
			        setTimeout(function () {
			            uni.stopPullDownRefresh();  //停止下拉刷新动画
			        }, 1000);
			    },
			onShow:function(){
				var that = this;
				uni.setNavigationBarTitle({
				title:'馆藏'
				})
				http.showCollections().then(list=>{
					console.log(list);
					that.urllist = list.data
					console.log("url是",that.urllist)
					
				})
				console.log("被收藏",uni.getStorageSync("beishoulu"));
			},
			methods: {
				prview:function(i){
					console.log("url:",i);
					var that = this;
					uni.previewImage({
						current:i,
						urls:that.imageurlList,
						loop:true,
						indicator:"default"
					})
				},
				update:function(){
					
					
					
				},
				getImageurl:function(url,i){
					var that = this;
					that.imageurlList[i] ="https://www.camwork.site/rescourse/collections/"+url;
					return "https://www.camwork.site/rescourse/collections/"+url;
				}
			}
		}
	
</script>

<style>
	.container{
	display: flex;
	flex-flow: column wrap;
	align-content: space-between;
	height: 100%;
	border-radius: 3px;
	padding: 20px;
	width: 100%;
	box-sizing: border-box;
	
	}
	.item {
		width: 32%;
		overflow: auto;
		margin-bottom: 2%;
		border-radius: 3px;
		background-color: #a1cbfa;
		color: #fff;
		box-sizing: border-box;

	}
	

	
	/* 将内容块重排为3列 */
	.item:nth-child(3n+1) {
		order: 1;
	}
	
	.item:nth-child(3n+2) {
		order: 2;
	}
	.item image{
	display:block;
	width: 100%;
	margin: 0;
	}
	
	.item:nth-child(3n) {
		order: 3;
	}
	
	/* 强制换列 */
	.container::before,
	.container::after {
		content: "";
		flex-basis: 100%;
		width: 0;
		order: 2;
	}
</style>
